<template>
  <div class="my-exer" :class="{ nodata: !listpage.list.length }">
    <a-input-search
      v-model:value="queryForm.keyword"
      placeholder="请输入题干关键字进行搜索"
      enter-button="搜索"
      size="large"
      style="width: 400px; margin-top: 10px; padding-bottom: 10px"
      @search="searchData()"
    />
    <el-scrollbar height="calc(100vh - 250px)" v-if="listpage.list.length">
      <div v-if="!isSearchQuestionBank">
        <a-card  hoverable class="my-card">
          <div
            class="content bankList"
            @click="clickQuestionBank(item)"
            v-for="(item, index) in questionBankList.list"
            :key="item.questionId"
          >
            <span>题库：{{ item.questionTypeName }} </span
            > <span class="des"> {{ item.collectNum }}道</span>
          </div>
        </a-card>
      </div>
      <a-card
        v-for="(item, index) in listpage.list"
        :key="item.questionId"
        @click="toExer(item)"
        hoverable
        class="my-card"
      >
        <div
          slot="title"
          v-html="highlightKeyword(item.title)"
          class="title"
        ></div>
        <div class="content">
          <span>试题来源：</span
          ><span class="des">{{ item.questionTypeName }}</span>
        </div>
      </a-card>
      <div class="page" style="margin-top: 10px; margin-bottom: 10px">
        <el-pagination
          v-model:current-page="listpage.curPage"
          v-model:page-size="listpage.pageSize"
          :total="listpage.total"
          background
          layout="prev, pager, next"
          :hide-on-single-page="true"
          @size-change="search"
          @current-change="search"
          @prev-click="search"
          @next-click="search"
        />
      </div>
    </el-scrollbar>

    <a-skeleton active v-if="loading" />
    <div v-if="listpage.list.length <= 0 && !loading" class="no-content">
      <el-empty
        class="testInfoempty"
        :image-size="240"
        description="请输入查询条件进行检索"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, onUnmounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import http from "@/request";

const queryForm = reactive({
  keyword: "",
});
const listpage = reactive({
  curPage: 1,
  pageSize: 20,
  total: 0,
  list: [],
});
const router = useRouter();
const loading = ref(false);
const isSearchQuestionBank = ref(false);
const bank = ref();
const questionBankList = reactive({
  list: [],
});
onMounted(async () => {
  const val = localStorage.getItem("searchResult");
  if (val) {
    queryForm.keyword = val;
    searchData();
  }
});

const searchData = () => {
  isSearchQuestionBank.value = false;
  search();
  searchQuestionBank();
};
function highlightKeyword(title) {
  if (queryForm.keyword) {
    let replaceReg = new RegExp(queryForm.keyword, "ig");
    let replaceString = `<span style="color: #ff0000">${queryForm.keyword}</span>`;
    return title.replace(replaceReg, replaceString);
  }
  return title;
}

const clickQuestionBank = (item) => {
  bank.value = item.questionTypeId;
  isSearchQuestionBank.value = true;
  listpage.curPage = 1;
  search();
};
async function search() {
  if (queryForm.keyword === "") {
    // 提示用户输入关键字
    listpage.list = [];
    localStorage.setItem("searchResult", "");
    return;
  } else {
    // 发起搜索请求
    loading.value = true;
    listpage.list = [];
    const postData = {
      keyword: queryForm.keyword,
      curPage: listpage.curPage,
      pageSize: listpage.pageSize,
    }; // 只传递keyword字段

    if (isSearchQuestionBank.value) {
      postData.questionTypeId = bank.value; // 添加questionTypeId字段
    }
    const {
      data: { code, data },
    } = await http.post("search/searchQuestion", postData);
    if (code !== 200) {
      return;
    }
    loading.value = false;
    listpage.list = data.list;
    listpage.total = data.total;
    localStorage.setItem("searchResult", queryForm.keyword);
  }
}
async function searchQuestionBank() {
  if (queryForm.keyword === "") {
    // 提示用户输入关键字
    questionBankList.list = [];
    return;
  } else {
    // 发起搜索请求
    questionBankList.list = [];
    const {
      data: { code, data },
    } = await http.post("search/searchQuestionType", {
      ...queryForm,
    });
    if (code !== 200) {
      return;
    }
    questionBankList.list = data;
    //将列表中 collectNum 为 0 的题目过滤掉
    questionBankList.list = questionBankList.list.filter(
      (item) => item.collectNum !== 0
    );
  }
}

function clearSearch() {
  queryForm.keyword = "";
  search();
}

// 跳转至练习页面
async function toExer(item) {
  router.push(`/search/paper/${item.questionId}/${queryForm.keyword}`);
}
</script>

<style scoped lang="scss">
.my-exer {
  min-height: calc(100vh - 190px);
}
.bankList{
  margin-bottom: 8px;
  font-size: 18px;
}
.nodata {
  justify-content: center;
}
.no-content {
  margin: 30px;
  text-align: center;
  font-size: 25px;
  color: gray;
}
.my-card {
  margin-top: 20px;
  :deep .ant-card-body {
    padding: 18px;
  }
  .title {
    font-size: 18px;
    color: #333;
    margin-bottom: 16px;
  }
  .content {
    font-size: 16px;
  }
  .des {
    color: #24b0fb;
  }
}
</style>
